<template>
  <div class="number-digital" :class="detectBrowser()">
    <div class="box-item">
      <li
        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
        :style="{ marginRight: needDivideMgright(index) }"
        v-for="(item, index) in orderNum"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i :id="`${nid}_numberItem_${index}_${hasPreview}`">0123456789</i>
        </span>
        <div v-if="needDivideDot(index)" class="num-dot">,</div>
      </li>
    </div>
  </div>
</template>

<script setup>
  import { defineProps, ref, watch, onMounted, inject } from 'vue'
  const props = defineProps({
    nid: String,
    numm: Number,
    numLen: Number,
    noneDivide: Boolean,
  })
  //
  const hasPreview = inject('hasPreview')

  function needDivideDot(index) {
    if (props.noneDivide) {
      //不需要分隔符
      return false
    }
    if (props.numLen <= 7) {
      return false
    }
    return index === props.numLen - 8 || index === props.numLen - 5
  }
  function needDivideMgright(index) {
    if (props.noneDivide) {
      //不需要分隔符
      return '2px'
    }
    if (props.numLen <= 7) {
      return '2px'
    }
    return index === props.numLen - 7 || index === props.numLen - 4 ? '14px' : '2px'
  }

  const orderNum = ref([])
  // 处理数字
  // numm: 传入的数字  numLen: 默认显示几位数
  const toOrderNum = (num) => {
    num = num.toString()
    if (num.length < props.numLen) {
      num = '0' + num // 如未满定义的位数，添加"0"补位
      toOrderNum(num) // 递归添加"0"补位
    } else if (num.length === props.numLen) {
      orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
    }
  }
  watch(
    () => props.numm,
    (newVal) => {
      toOrderNum(newVal)
      setNumberTransform()
    }
  )
  function setNumberTransform() {
    for (let index = 0; index < orderNum.value.length; index++) {
      const ele = document.getElementById(`${props.nid}_numberItem_${index}_${hasPreview}`)
      if (ele) {
        ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
      }
    }
  }
  toOrderNum(props.numm)
  onMounted(() => {
    setTimeout(() => {
      setNumberTransform()
    }, 200)
  })

  const detectBrowser = () => {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Chrome') !== -1 && userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Edg') === -1) {
      return 'Chrome' // Chrome
    } else if (userAgent.indexOf('Firefox') !== -1) {
      return 'Firefox' // Firefox
    } else if (userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1 && userAgent.indexOf('Edge') === -1) {
      return 'Safari' // Safari
    } else if (userAgent.indexOf('Edg') !== -1) {
      return 'Edge' // Edge
    } else {
      return 'Unknown-browser' // 其他浏览器...（可根据自己需要确定是否新增其他浏览器的判断）
    }
  }
</script>
<style lang="scss">
  .number-digital {
    display: flex;
    justify-content: center;
    .box-item {
      position: relative;
      font-size: 54px;
      line-height: 41px;
      text-align: center;
      list-style: none;
      color: #2d7cff;
      writing-mode: vertical-lr;
      text-orientation: upright;
      /*文字禁止编辑*/
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }

    /*滚动数字设置*/
    .number-item {
      width: 34px;
      height: 56px;
      color: #f3c83d;
      font-size: 40px;
      list-style: none;

      & > span {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        width: 100%;
        height: 100%;
        writing-mode: vertical-rl;
        text-orientation: upright;
        overflow: hidden;

        & > I {
          font-style: normal;
          position: absolute;
          top: 8px;
          left: 50%;
          transform: translate(-50%, 0);
          transition: transform 1s ease-in-out;
          letter-spacing: 10px;
        }
      }
    }

    .number-item:last-child {
      margin-right: 0;
    }

    .num-dot {
      display: inline-block;
      margin-left: 8px;
      height: 53px;
      font-size: 48px;
      font-weight: normal;
      color: #ffffff;
      line-height: 47px;
      position: relative;
    }
  }
  .Safari .num-dot,
  .Edge .num-dot,
  .Chrome .num-dot {
    left: -10px;
    margin-left: 0;
  }
</style>
